<style>
.payStore{
	/* display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	padding: 60upx 0; */
	width: 100%;
    text-align: center;
	padding: 40upx;
	background: #e3e3e3;
}
.pay-box{
	background: #fff;
	border-radius: 8upx;
	padding: 30upx 30upx 50upx 30upx;
}
.logo{
	width: 140upx;
	height: 140upx;
}
.title{
	margin-bottom: 20upx;
	font-size: 36upx;
}
.moneyInput{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.tip{
	margin-bottom: 10upx;
	text-align: left;
}

.inner{
	margin-bottom: 30upx;
	display: flex;
	padding-bottom: 12upx;
	font-size: 48upx;
	border-bottom: 1upx solid #e3e3e3;
	justify-content: flex-start;
	align-items: center;
}
.innert{
	display: inline-block;
	font-size: 48upx;
}
.money{
	/* width: 60%; */
	/* margin-bottom: 20upx; */
	padding: 6upx 8upx -2upx 8upx;
	text-align: left;
	justify-content: flex-start;
	/* border: 1upx solid #e3e3e3;
	border-radius: 6upx; */
}
.lease-btn{
	font-size: 36upx;
}
</style>
<template>
	<view class="payStore">
		<div class="pay-box">
			<image class="logo" :src="store.logo" mode=""></image>
			<div class="title">{{store.name}}</div>
			<div class="moneyInput">
				 <div class="tip">支付点金券</div>
				 <div class="inner">
					 <div class="innert">￥</div><input type="number" focus="true" class="money"  v-model="money" />
				 </div>
				 
			</div>
			<div>
				<button type="primary" class="lease-btn" @click="payStore">确认支付</button>
			</div>
		</div>
		
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations
	} from 'vuex'
	
	export default {
		data() {
			return {
				money:'',
				bid:'',
				coupon:0,
				store:{}
			};
		},
		computed:{
		    ...mapState(['userInfo'])
		},
		methods:{
			payStore(){
				let that = this
				let money = Number(this.money)
				if(typeof money != 'number' || money<=0){
					uni.showToast({
						title: '请正确输入数量',
						icon: 'none',
						mask: true
					})
					return
				}
				if(money > this.coupon){
					uni.showToast({
						title: '点金券不足',
						icon: 'none',
						mask: true
					})
					return
				}
				uni.request({
					url: this.httpUrl + 'userCoupon/useCoupon',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						uid:that.userInfo.uid,
						bid:that.bid,
						money:money
					},
					success: (res) => {
						console.log(res)
						if (res.data.code == 1) {
							uni.showToast({
								title: '支付成功',
								icon: 'none',
								mask: true
							})
						    that.getUserInfo()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})
			},
			getUserInfo(){
				let that = this
				uni.request({
					url: this.httpUrl + 'user/queryOneByPk',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						id:that.userInfo.uid
					},
					success: (res) => {
						console.log(res)
						if (res.data.code == 1) {
							that.coupon = res.data.data.coupon
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})
			},
			getStore(){
				let that = this
				uni.request({
					url: this.httpUrl + 'business/list4Page',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						bid:that.bid,
						pageNum:1,
						pageSize:5
					},
					success: (res) => {
						console.log(res)
						if (res.data.code == 1) {
							that.store = res.data.data.data[0]
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})
			}
		},
		onLoad(options) {
			this.bid = options.bid
			console.log(options.bid);
			this.getStore()
			this.getUserInfo()
		}
	}
</script>


